<template>
	<div class="xiang-qu">
		<div class="header">{{ $t("base.n3-name") }}</div>

		<div class="body">
			<!-- <div class="section1">
				<div class="s1-left">
					<div class="s1-title">周末荟</div>
					<div class="s1-list">
						<div v-for="(item, index) in list1" :key="index">
							<el-image :src="item.categoryCover + '?imageMogr2/thumbnail/375x'" fit="cover" />
							<span class="tag">{{ item.category }} </span>
						</div>
					</div>
				</div>
				<div class="s1-right">
					<swiper class="sw" :modules="[Autoplay, Pagination]" :autoplay="true as any" :pagination="{ bulletActiveClass: 'current' } as any" :loop="true">
						<swiper-slide class="swiper-item" v-for="(item, index) in list2" :key="index">
							<el-image class="in" :src="item + '?imageMogr2/thumbnail/750x'" fit="cover" />
							<span class="tag">立即购买</span>
						</swiper-slide>
					</swiper>
					<div class="s1-title">赶场天</div>
				</div>
			</div> -->

			<div class="section2">
				<swiper :modules="[Autoplay, Pagination]" :autoplay="true as any" :pagination="{ bulletActiveClass: 'current' } as any" :loop="true">
					<swiper-slide class="swiper-item" v-for="(item, index) in list1" :key="index">
						<div class="left">
							<el-image class="in" :src="item.img + '?imageMogr2/thumbnail/750x'" fit="cover" />
						</div>
						<div class="right">
							<div class="info">
								<span class="info-title">{{ item.name }}</span>
								<span class="info-date tag">{{ item.date }}</span>
								<span class="info-content">{{ item.content }}</span>
							</div>
							<div class="footer">
								<span>{{ item.addr }}</span>
								<span class="more" @click="pageJump('/xiang-qu/detail')">{{ $t("index.more") }}</span>
							</div>
						</div>
					</swiper-slide>
				</swiper>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { Autoplay, Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/autoplay";
import "swiper/css/pagination";
import { useBaseStore } from "@/store/base";
import { useVR } from "@/hook/useVR";
import { useI18n } from "vue-i18n";
const i18n = useI18n();
const { cosPrefix } = useBaseStore();
const { pageJump } = useVR();
const list1 = computed(() => [
	{
		name: i18n.t("index.xq.a1-name"),
		date: i18n.t("index.xq.a1-date"),
		img: cosPrefix + "three-level/xiangqu/zhoumohui/minsuwenhuahuodong/8.jpg",
		content: i18n.t("index.xq.a1-content"),
		addr: i18n.t("index.xq.a1-addr")
	},
	{
		name: i18n.t("index.xq.a2-name"),
		date: i18n.t("index.xq.a2-date"),
		img: cosPrefix + "three-level/xiangqu/zhoumohui/minsuwenhuahuodong/7.png",
		content: i18n.t("index.xq.a2-content"),
		addr: i18n.t("index.xq.a2-addr")
	},
	{
		name: i18n.t("index.xq.a1-name"),
		date: i18n.t("index.xq.a3-date"),
		img: cosPrefix + "three-level/xiangqu/zhoumohui/minsuwenhuahuodong/9.jpg",
		content: i18n.t("index.xq.a3-content"),
		addr: i18n.t("index.xq.a3-addr")
	}
	// {
	// 	name: "树顶漫步研学夏令营",
	// 	date: "每周六、周日",
	// 	content: "荆竹村自2019年开始先后获评全国首批乡村旅游重点村，2022年国家级乡村旅游助推脱贫典型案例，联合国世界旅游组织“最佳旅游乡村”。",
	// 	category: "户外活动",
	// 	categoryCover: cosPrefix + "xiangqu/img1.jpg",
	// 	img: cosPrefix + "xiangqu/img1.jpg"
	// },
	// {
	// 	name: "归原·国学实践",
	// 	date: "5月、6月",
	// 	content: "荆竹村自2019年开始先后获评全国首批乡村旅游重点村，2022年国家级乡村旅游助推脱贫典型案例，联合国世界旅游组织“最佳旅游乡村”。",
	// 	category: "文化交流活动",
	// 	categoryCover: cosPrefix + "xiangqu/img2.png",
	// 	img: cosPrefix + "xiangqu/img2.png"
	// },
	// {
	// 	name: "年猪节",
	// 	date: "每年年底",
	// 	content: "荆竹村自2019年开始先后获评全国首批乡村旅游重点村，2022年国家级乡村旅游助推脱贫典型案例，联合国世界旅游组织“最佳旅游乡村”。",
	// 	category: "民俗活动",
	// 	categoryCover: cosPrefix + "xiangqu/img3.jpg",
	// 	img: cosPrefix + "xiangqu/img3.jpg"
	// }
]);
// const list2 = [cosPrefix + "xiangqu/img2.jpg", cosPrefix + "xiangqu/img4.jpg"];
</script>
<style lang="scss" scoped>
.xiang-qu {
	position: relative;
	&::before {
		position: absolute;
		top: -400px;
		left: -100px;
		z-index: 2;
		width: 700px;
		height: 700px;

		// div是你需要添加背景图片的盒子
		content: "";
		background-image: url("https://sms-1302634640.file.myqcloud.com/cloud-jingzhu/bg5.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		opacity: 1;
	}
	&::after {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		width: 100%;
		height: 100%;

		// div是你需要添加背景图片的盒子
		content: "";
		background-image: url("https://sms-1302634640.file.myqcloud.com/cloud-jingzhu/bg4.png");
		background-repeat: no-repeat;
		background-position: 100% 70%;
		background-size: 100%;
		opacity: 0.1;
	}
}
.header {
	margin-top: 60px;
	font-size: 36px;
	font-weight: bold;
	color: rgb(51 51 51 / 100%);
	text-align: center;
}
.body {
	position: relative;
	z-index: 9;
	display: flex;
	flex-direction: column;
	padding: 40px 320px;
	.section1 {
		display: flex;
		height: 320px;
		.s1-title {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 78px;
			font-size: 28px;
			font-weight: bold;
			color: $theme-color;
			&::after {
				width: 80px;
				height: 4px;
				content: "";
				background-color: $theme-color;
			}
		}
		.s1-left {
			flex: 1;
			.s1-list {
				display: flex;
				justify-content: space-between;
				width: 100%;
				> div {
					display: flex;
					flex-direction: column;
					align-items: center;
					.el-image {
						width: 140px;
						height: 140px;
						margin-bottom: 40px;
						border-radius: 50%;
					}
					span {
						padding: 4px 16px;
						font-size: 14px;
					}
				}
			}
		}
		.s1-right {
			position: relative;
			display: flex;
			flex-direction: column;
			width: 620px;
			padding-left: 40px;
			.sw {
				width: 100%;
				height: 320px;
				.swiper-item {
					.tag {
						position: absolute;
						right: 20px;
						bottom: 20px;
						padding: 8px 16px;
						font-size: 16px;
					}
				}
			}
			.el-image {
				width: 100%;
				height: 320px;
			}
			.s1-title {
				position: absolute;
				right: 50%;
				bottom: -60px;
				z-index: 9;
				margin-bottom: 0;
				transform: translateX(50%);
			}
		}
	}
	.section2 {
		height: 320px;
		margin-top: 107px;
		.swiper {
			width: 100%;
			height: 100%;
			.swiper-item {
				display: flex;
				.left {
					flex: 1;
					.el-image {
						width: 100%;
						height: 320px;
					}
				}
				.right {
					flex: 1;
					padding: 40px;
					.title {
						display: flex;
						flex-direction: column;
						align-items: center;
						font-family: SourceSerif;
						font-size: 32px;
						font-weight: bold;
						color: $theme-color;
						span:last-child {
							margin-top: 10px;
							font-size: 20px;
							font-weight: normal;
							color: rgb(16 16 16 / 100%);
						}
					}
					.info {
						// margin-top: 60px;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						.info-title {
							font-family: SourceSerif;
							font-size: 28px;
							font-weight: bold;
							color: rgb(51 51 51 / 100%);
						}
						.info-date {
							width: 124px;
							padding: 4px;
							margin-top: 20px;
							font-size: 18px;
							color: #ffffff;
							text-align: center;
							background-color: #8a1313;
							border-radius: 4px;
						}
						.info-content {
							margin-top: 20px;
							font-family: SourceSerif;
							font-size: 20px;
							line-height: 2em;
							color: rgb(25 25 25 / 100%);
						}
					}
					.footer {
						display: flex;
						justify-content: space-between;
						margin-top: 20px;
						font-size: 18px;
						color: #333333;
						text-decoration: underline;
					}
				}
			}
		}
	}
}
:deep(.current) {
	background-color: $theme-color;
	opacity: 1;
}
.tag {
	padding: 4px 16px;
	color: #ffffff;
	background-color: #8a1313;
	border-radius: 4px;
}

@media all and (max-width: 750px) {
	.xiang-qu {
		&::before {
			width: 100%;
			height: anto;
		}
	}
	.header {
		margin-top: 12px;
		font-size: 28px;
	}
	.body {
		padding: 16px;
		.section2 {
			height: auto;
			margin-top: 0;
		}
	}
	.swiper-item {
		flex-direction: column;
	}
}
</style>
